<template>
  <div>
    <el-form
      :inline="true"
      :model="form"
      size="small"
      class="searchForm bg-gray flex flex-wp flex-a-c"
    >
      <el-form-item label="手机号">
        <el-input v-model.trim="form.phone" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="用户状态:">
        <el-select
          v-model="form.status"
          placeholder="请选择用户状态"
          filterable
          clearable
        >
          <el-option label="正常" :value="0" ></el-option>
          <el-option label="黑名单" :value="1" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会员等级:">
        <el-select
          v-model="form.levelId"
          placeholder="请选择会员等级"
          filterable
          clearable
        >
          <el-option
            v-for="item in levelList"
            :key="item.id"
            :label="item.levelName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="注册时间:">
        <el-date-picker
          v-model="rangeTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-button icon="el-icon-search" size="small" @click="search()"
        >查询</el-button
      >
    </el-form>
    <el-table
      border
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column
        prop="phone"
        label="手机号"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column
        label="会员等级"
        align="center"
        width="180"
      >
      <template slot-scope="scope">
          {{ StatusObj[scope.row.levelId] }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="mercNo"
        label="红包"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="mercNo"
        label="积分"
        align="center"
        width="180"
      >
      </el-table-column>
            <el-table-column
        prop="mercNo"
        label="优惠券"
        align="center"
        width="180"
      >
      </el-table-column>
            <el-table-column
        prop="mercNo"
        label="消费总额"
        align="center"
        width="180"
      >
      </el-table-column> -->
      <el-table-column
        prop="mercName"
        label="状态"
        align="center"
        width="250"
      >
        <template slot-scope="scope">
          {{ scope.row.status ? '黑名单' : '正常' }}
        </template>
      </el-table-column>
      <el-table-column label="注册时间" align="center">
        <template slot-scope="scope">
          {{ new Date(scope.row.addTime).Format('YYYY-MM-DD hh:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="300"
        class-name="actionTd"
      >
        <template slot-scope="scope">
          <el-button size="mini" round @click="showDialog(scope.row)">
            会员设置</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="text-c margin-t-d">
      <el-pagination
        @current-change="getDataList"
        :current-page.sync="pageInfo.pageindex"
        :page-size="pageInfo.pagesize"
        background
        layout="total,prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
    <el-dialog
      title="商品审核"
      :visible.sync="infoDetailVisible"
      :close-on-click-modal="false"
      width="70%"
    >
      <el-form
        :model="editData"
        label-width="140px"
        size="small"
        :inline="true"
      >
        <el-form-item label="当前会员等级">
          <el-select
            v-model="editData.levelId"
            placeholder="请选择会员等级"
            filterable
            clearable
          >
            <el-option
              v-for="item in levelList"
              :key="item.id"
              :label="item.levelName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-c">
        <el-button size="small" round @click="levelVisible = false"
          >取 消</el-button
        >
        <el-button size="small" round type="primary" @click="levelSubmit()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      levelList: [],
      rangeTime: [],
      form: {
        endTime: '',
        levelId: '',
        phone: '',
        startTime: '',
        status: '',
      },
      qdForm: {},
      StatusObj: {},
      editData:{
        id: '',
        levelId: '',
      },
      pageInfo: {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      }, //页码
      tableData: [],
      infoDetailVisible: false,
    }
  },
  beforeMount() {
    this.getLevelList()
    this.search()
  },
  activated() {
    this.getDataList()
  },
  methods: {
    showDialog(item) {
      this.editData.id = item.id
      this.editData.levelId = item.levelId
      this.$nextTick(() => {
        this.infoDetailVisible = true
      })
    },
    getLevelList() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$ajax
        .getData('adm/level/getList')
        .then((data) => {
          loading.close()
          let obj = {}
          data.resData.map(_=>{
            obj[_.id] = _.levelName
          })
          this.StatusObj = obj
          this.levelList = data.resData
          
        })
        .catch((error) => {
          loading.close()
          this.$message({
            message: error.codeDes || error.message,
            type: 'error',
          })
        })
    },
    search() {
      this.qdForm = { ...this.form }
      
      this.qdForm.startTime =
        this.rangeTime && this.rangeTime[0]
          ? this.rangeTime[0].Format('YYYY-MM-DD hh:mm:ss')
          : ''
      this.qdForm.endTime =
        this.rangeTime && this.rangeTime[1]
          ? this.rangeTime[1].Format('YYYY-MM-DD 23:59:59')
          : ''
      this.pageInfo = {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      }
      if(!this.qdForm.endTime)
        delete this.qdForm.endTime
      if(!this.qdForm.levelId)
        delete this.qdForm.levelId
      if(!this.qdForm.phone)
        delete this.qdForm.phone
      if(!this.qdForm.startTime)
        delete this.qdForm.startTime
      if(!this.qdForm.status)
        delete this.qdForm.status
      this.getDataList()
    },
    getDataList() {
      let params = {
        pageNum: this.pageInfo.pageindex,
        pageSize: this.pageInfo.pagesize,
        ...this.qdForm,
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$ajax
        .getData('adm/member/getList', params)
        .then((data) => {
          loading.close()
          this.tableData = data.resData.data
          this.pageInfo.total = data.resData.count
        })
        .catch((error) => {
          loading.close()
          this.$message({
            message: error.codeDes || error.message,
            type: 'error',
          })
        })
    },
    levelSubmit() {
      let params = {
        ...this.editData,
      };
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$ajax
        .postData('adm/member/setLevel', params)
        .then((data) => {
          loading.close();
          this.search();
          this.infoDetailVisible = false;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: 'error'
          });
        });
    }
  },
}
</script>
<style lang="scss" scoped></style>
